<template>
    <div class="Preson">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄{{ age }}</h2>
        <h2>电话：{{ tel }}</h2>
        <button @click="ChangeName">修改名字</button>
        <button @click="ChangeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
        name: 'Preson',
        // vue2的选项式API
        // 数据
        data(){
            return {
                name: '张三',
                age: 20,
                tel:'123131414423'
            }
        },
        // 方法
        methods: {
            showTel() {
               alert(this.tel)
            },
            ChangeName() {
               this.name = 'zhang-san'
            },
            ChangeAge() {
               this.age += 1
            }
        }
    }
    </script>
    
    <style>
    .Preson{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 10px;
    }
    </style>